<template>
	<div class="page">
		<el-form class="form" ref="form" :model="formData" label-width="80px">
			<div class="title">身份验证</div>
			<el-form-item label-width="0">
				<el-input
					v-model="formData.smsCode"
					placeholder="请输入收到的验证码"
				></el-input>
			</el-form-item>
			<el-form-item>
				<el-button size="mini" @click="getVerifyCode"
					>重新发送
					<span v-if="$store.getters.wait"> {{ $store.getters.wait }}s </span>
				</el-button>
				<el-button type="primary" size="mini" @click="login">登录</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { mobileExchange, checkSms } from '@/api'
var urlParams = new URLSearchParams(location.search)
export default {
	data() {
		return {
			formData: { smsCode: '' }
		}
	},
	computed: {},
	mounted() {},
	methods: {
		async getVerifyCode() {
			try {
				await sendSmsCode(this.$route.query.phone)
				showToast('短信验证码已发送')
				this.$store.dispatch('startWait')
			} catch (e) {
				showToast(e.msg)
			}
		},
		login() {
			var params = {
				code: this.formData.smsCode,
				authCode: urlParams.get('authCode')
			}
			checkSms(params)
				.then((res) => {
					return this.$store.dispatch('login', res)
				})
				.then(() => {
					this.$router.replace({
						path: '/'
					})
				})
				.catch(console.error)
		}
	},
	components: {}
}
</script>

<style lang="scss" scoped="scoped">
.page {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f5f7f9;
}
.title {
	font-size: 14px;
	padding: 2px 0 12px;
	color: #000;
}
.form {
	width: 300px;
	padding: 15px 20px 0;
	background-color: #fff;
	border-radius: 12px;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}
</style>
